<template>
  <div class="posin">
    <div>
      <div id="nameEcharts"></div>
    </div>
    <div>
      <div id="linechart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      tryFada: [200, 300, 400],
    };
  },
  mounted() {
    var nameEcharts = echarts.init(document.getElementById("nameEcharts"));
    var linechart = echarts.init(document.getElementById("linechart"));
    
    nameEcharts.setOption({
      title: {
        text: "考勤统计圆形表",
        subtext: "本月考勤",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "来着考勤统计",
          type: "pie",
          radius: "50%",
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: "{d}%",

              textStyle: {
                align: "center",
                baseline: "middle",
                fontFamily: "微软雅黑",
                fontSize: 15,
                fontWeight: "bolder",
              },
            },
          },

          data: [
            { value: this.tryFada[0], name: "未打卡" },
            { value: this.tryFada[1], name: "迟到" },
            { value: this.tryFada[2], name: "正常" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    }),
      linechart.setOption({
        title: {
          text: "考勤折现图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["打卡", "未打卡", "迟到"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "打卡",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "未打卡",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "迟到",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      });
  },
  
};
</script>

<style>
#nameEcharts {
  width: 50%;
  height: 600px;
}
</style>
<style>
.posin {
  position: relative;
}

#linechart {
  position: absolute;
  top: 0;
  right: 15px;
  width: 50%;
  height: 550px;
}
</style>